import {Layout, Row, Col, Select, DatePicker, Button} from 'antd';
import React, {Component} from 'react';
import 'antd/dist/antd.css';
import './css/NewThings.css'

const {Content, Footer} = Layout;
const {Option} = Select;

export default class NewThings extends Component {
    newThing = {
        name: "",
        type: "事项类型1",
        time: "",
        warn: "紧急程度1",
        status: "进度1",
        content: ""
    };

    state = {
        isComplete: false,
    };

    static defaultProps = {

    };

    handleTypeChange = (value) => {
       this.newThing.type = value;
    };

    handleWarnChange = (value) => {
        this.newThing.warn = {value};
    };

    handleTimeChange = (date, dateString) => {
        this.newThing.time = dateString;
        this.handleTextChanged();
    };

    handleStatusChange = (value) => {
        this.newThing.status = value;
    };

    //判断是否已经填写完毕，如果填写完毕就让按钮可以点击，否则不可点击
    handleTextChanged = () => {
        this.newThing.name = this.refs.name.value;
        this.newThing.content = this.refs.text.value;

        if (this.newThing.type === "" || this.newThing.warn === ""
            || this.newThing.time === "" || this.newThing.status === ""
            || this.newThing.name === null || this.newThing.content === null
            || this.newThing.name === "" || this.newThing.content === "") {
            this.setState({isComplete: false});
        } else {
            this.setState({isComplete: true});
        }
    };

    submit = () => {

    };

    render() {
        let button;

        if (this.state.isComplete) {
            button = <Row type="flex" align="center" className="newThingRow">
                <Col span={12} offset={6} className="input">
                    <Button type="primary" className="submit" onClick={this.submit}>保存</Button>
                </Col>
            </Row>;
        } else {
            button = <Row type="flex" align="center" className="newThingRow">
                <Col span={12} offset={6} className="input">
                    <Button type="primary" className="submit" onClick={this.submit} disabled>保存</Button>
                </Col>
            </Row>;
        }

        let input = <div style={{padding: 24, background: '#fff', minHeight: 780}}>
            <Row type="flex" align="center" className="newThingRow">
                <Col span={4} className="lable">事项名称：</Col>
                <Col span={12}>
                    <input ref="name" className="name" onChange={this.handleTextChanged}/>
                </Col>
            </Row>
            <Row type="flex" justify="center" className="newThingRow">
                <Col span={4} className="lable">事项类型：</Col>
                <Col span={12} className="input">
                    <Select
                        ref="type"
                        defaultValue="事项类型1"
                        style={{width: 200}}
                        onChange={this.handleTypeChange}
                    >
                        <Option value="事项类型1">事项类型1</Option>
                        <Option value="事项类型2">事项类型2</Option>
                        <Option value="事项类型3">事项类型3</Option>
                    </Select>
                </Col>
            </Row>
            <Row type="flex" align="center" className="newThingRow">
                <Col span={4} className="lable">紧急程度：</Col>
                <Col span={12} className="input">
                    <Select
                        ref="warn"
                        defaultValue="紧急程度1"
                        style={{width: 200}}
                        onChange={this.handleWarnChange}
                    >
                        <Option value="紧急程度1">紧急程度1</Option>
                        <Option value="紧急程度2">紧急程度2</Option>
                        <Option value="紧急程度3">紧急程度3</Option>
                    </Select>
                </Col>
            </Row>
            <Row type="flex" align="center" className="newThingRow">
                <Col span={4} className="lable">发布时间：</Col>
                <Col span={12} className="input">
                    <DatePicker ref="time" style={{width: 200}} onChange={this.handleTimeChange} />
                </Col>
            </Row>
            <Row type="flex" align="center" className="newThingRow">
                <Col span={4} className="lable">状态：</Col>
                <Col span={12} className="input">
                    <Select
                        ref="schedule"
                        defaultValue="进度1"
                        style={{width: 200}}
                        onChange={this.handleStatusChange}
                    >
                        <Option value="进度1">进度1</Option>
                        <Option value="进度2">进度2</Option>
                        <Option value="进度3">进度3</Option>
                    </Select>
                </Col>
            </Row>
            <Row type="flex" align="center" className="newThingRow">
                <Col span={4} className="lable">内容：</Col>
                <Col span={12} className="input">
                    <textarea ref="text" className="textArea" onChange={this.handleTextChanged}/>
                </Col>
            </Row>
            {button}
        </div>;

        return (
            <Layout>
                <Content style={{margin: '0 16px'}}>
                    {input}
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Test Project
                </Footer>
            </Layout>
        );
    };
}
